<script setup>
import { ref } from 'vue'
import { listFlow } from '@/api/dashboard'
import { useCommonStore } from '@/store/index'
const commonStore = useCommonStore()
const popup = ref(null)
function open() {
  popup.value.open()
  listFlow({
    pageNum: 1,
    pageSize: 10,
    type: 0
  }).then((res) => {
    flow.value = res.rows
  })
}
defineExpose({ open })
const flow = ref([])
</script>

<template>
  <Popup width="1600" height="830" ref="popup" title="天台黄茶茶加工">
    <div class="flex-between">
      <div class="flex-center">
        <img class="icon" src="/src/assets/img/process.png" />
        <div class="group">
          <p class="value">{{ commonStore.data[6]?.content }}{{ commonStore.data[6]?.unit }}</p>
          <p class="name">加工企业</p>
        </div>
      </div>
      <div class="flex-center">
        <img class="icon" src="/src/assets/img/machine.png" />
        <div class="group">
          <p class="value">{{ commonStore.data[7]?.content }}{{ commonStore.data[7]?.unit }}</p>
          <p class="name">加工机械</p>
        </div>
      </div>
      <div class="flex-center">
        <img class="icon" src="/src/assets/img/volume.png" />
        <div class="group">
          <p class="value">{{ commonStore.data[8]?.content }}{{ commonStore.data[8]?.unit }}</p>
          <p class="name">加工量</p>
        </div>
      </div>
      <div class="flex-center">
        <img class="icon" src="/src/assets/img/money.png" />
        <div class="group">
          <p class="value">{{ commonStore.data[9]?.content }}{{ commonStore.data[9]?.unit }}</p>
          <p class="name">加工产值</p>
        </div>
      </div>
    </div>
    <div class="flow-chart">
      <div class="item" v-for="(item, index) in flow" :key="item.id">
        <div>
          <div class="img"><img v-cover="item.cover" /></div>
          <p>{{ item.name }}</p>
        </div>
        <div class="right" v-if="(index + 1) % 4 != 0"></div>
      </div>
    </div>
  </Popup>
</template>

<style lang="scss" scoped>

.right {
  background: url('/src/assets/img/process/right.png') no-repeat;
  width: 80px;
  height: 80px;
  margin-left: 20px;
  margin-bottom: 60px;
}

.icon {
  width: 78px;
  height: 86.6px;
}

.group {
  .value {
    margin-left: 20px;
    font-family: DIN, DIN;
    font-weight: bold;
    font-size: 24px;
    line-height: 28px;
    background-image: -webkit-linear-gradient(bottom, #0084e9, #fff 90%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .name {
    margin-top: 5px;
    margin-left: -25px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #ffffff;
    line-height: 25px;
    width: 154.62px;
    height: 31.01px;
    text-align: center;
    background: url('/src/assets/img/line.png') no-repeat;
  }
}

.flow-chart {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  margin-top: 50px;
  .item {
    display: flex;
    align-items: center;
    .img {
      width: 260px;
      height: 154px;
      background: #123371;
      border: 2px solid #15c7ff;
      padding: 10px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    p {
      margin: 24px auto;
      background: url('/src/assets/img/process/ray.png') no-repeat;
      text-align: center;
      height: 45px;
      width: 118px;
      line-height: 45px;
      color: #fff;
    }
  }
}
</style>
